{include "INC_header.html" title="图集编辑"}
<div id="app-outlet" class="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <div class="app-container">
            <main class="padding">
                <div class="ui form">
                    <div class="field">
                        <div class="label">图集名称</div>
                        <div class="" style="max-width: 400px;">
                            <a-input placeholder="* 图集名称，可用于模板调取 *" v-model:value="data.name"></a-input>
                        </div>
                    </div>
                    <div class="field">
                        <div class="label">站点归属</div>
                        <div class="">
                            <a-radio-group v-model:value="data.multiSite" button-style="solid">
                                <a-radio :value="0">通用</a-radio>
                                <a-radio :value="1">指定站点</a-radio>
                            </a-radio-group>
                        </div>
                    </div>
                    <div class="field" v-if="data.multiSite == 1">
                        <div class="label">指定站点归属</div>
                        <div class="">
                            <a-checkbox v-model:checked="es.checked" v-for="es in sites" :value="es.id">{{ es.name }}</a-checkbox>
                        </div>
                    </div>
                    <div class="field">
                        <div class="label">图集</div>
                        <div class="cms-focus-pictures">
                            <div class="item" v-for="(pic, index) in data.pictures">
                                <div class="picture radius overflow-hidden"><a-image :src="pic.picture"/></div>
                                <div class="desc">
                                    <a-textarea :allowClear="true" rows="3" v-model:value="pic.desc" placeholder="可填写图片说明、代码"></a-textarea>
                                </div>
                                <div class="url">
                                    <a-input :allowClear="true" v-model:value="pic.url" placeholder="填写图片链接跳转地址"></a-input>
                                </div>
                                <div class="padding-top">
                                    <a-popconfirm
                                            title="确定要删除这张图片？"
                                            ok-text="确定"
                                            cancel-text="取消"
                                            @confirm="deletePicture(index)"
                                    >
                                        <div class="ui button block danger small">删除</div>
                                    </a-popconfirm>
                                </div>
                            </div>
                            <div class="item btn" @click="addPicture">
                                <i class="fa-solid fa-circle-plus"></i>
                                <div class="padding-top text-large">添加图片</div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            <footer class="light-background padding border-top ui flex-item">
                <div class="center"></div>
                <div class="end">
                    <a-button href="{url url='/cms/admin/focus/list'}"><i class="fa fa-arrow-left margin-right-half"></i> 返回列表</a-button>
                </div>
                <div class="end">
                    <a-button type="primary" @click="save"><i class="fa-regular fa-floppy-disk margin-right-half"></i> 保存图集</a-button>
                </div>
            </footer>
        </div>
        <!-- 文件选择器 -->
        <a-modal class="iframe-body"
                 v-model:visible="filesModal.show"
                 :title="filesModal.title"
                 :cancel-text="filesModal.cancelText"
                 :ok-text="filesModal.okText"
                 @ok="filesManagerOk">
            <iframe style="border: solid 1px var(--border-color); border-radius: var(--radius-width);" ref="filesFrame" v-if="filesModal.show" :src="filesModal.fs + '&resize=' + filesModal.resize + '&type=' + filesModal.type + '&multi=' + (filesModal.multi ? 1 : 0)" frameborder="0" scrolling="auto" width="100%" height="100%"></iframe>
        </a-modal>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp, defineComponent, ref } = Vue;
    const { message, Empty, Modal } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                config: appProviderConfig,
                //站点
                sites: [],
                //数据
                data: {
                    id: parseInt("{$get.id|default:0}"),
                    name: '',
                    pictures: [],
                    siteId: '',
                    multiSite: 0
                },
                loading: false,
                //文件管理器
                filesModal: {
                    show: false,
                    title: "文件选择",
                    okText: "确定",
                    cancelText: "取消",
                    ok: null,
                    fs: "{url url='/fs'}?parentId=0&groupName=cms&selectable=1",
                    resize: "",
                    type: "all",
                    multi: false
                },
            }
        },
        mounted() {
            this.initData();
        },
        methods: {
            initData(){
                if (this.data.id > 0) {
                    //获取站点数据，用于筛选
                    let self = this;
                    const hide = message.loading("正在加载图集数据");
                    axios.get("{url url='/cms/api/focus'}", {
                        params: { admin:1, id: this.data.id }
                    }).then(({ data }) => {
                        hide();
                        if (data.error === 0) {
                            let siteId = data.data.siteId != '' && data.data.siteId != null ? data.data.siteId.split(",") : [];
                            data.data.multiSite = siteId.length > 0 ? 1 : 0;
                            self.data = data.data;
                            self.getSites();
                        } else {
                            message.error(data.message);
                        }
                    }).catch(() => {
                        hide();
                        message.error("加载数据失败");
                    });
                } else {
                    this.getSites();
                }
            },
            getSites(){
                //获取站点数据，用于筛选
                let self = this;
                const hide = message.loading("正在加载站点数据");
                axios.get("{url url='/cms/api/site/list'}", {
                    params: { admin:1, total: 500 }
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        let siteId = self.data.siteId;
                        siteId = siteId != '' && siteId != null ? siteId.split(",") : [];
                        let filterSites = [];
                        data.data.list.map(site => {
                            site.checked = siteId.indexOf(site.id.toString()) !== -1;
                            filterSites.push(site);
                        });
                        self.sites = filterSites;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
            },
            //打开文件管理对话框
            filesManagerOpen: function (params) {
                params = params || {};
                this.filesModal.title = params.title || "文件选择";
                this.filesModal.okText = params.okText || "确定";
                this.filesModal.cancelText = params.cancelText || "取消";
                this.filesModal.resize = params.resize || "";
                this.filesModal.type = params.type || "all";
                this.filesModal.multi = params.multi || false;
                this.filesModal.ok = params.ok || null;
                this.filesModal.show = true;
            },
            //点击确定
            filesManagerOk: function () {
                //从iFrame里边找图片
                let filesManager = this.$refs.filesFrame.contentWindow.FilesManager || {};
                if (filesManager.list) {
                    let list = [];
                    filesManager.list.map(file => {
                        if (file.checked && (this.filesModal.type === "all" || file.type === this.filesModal.type)) {
                            list.push(file);
                        }
                    });
                    if (list.length > 0 && typeof this.filesModal.ok === "function") {
                        this.filesModal.ok(this.filesModal.multi ? list : list[0]);
                    }
                }
                //关闭文件选择框
                this.filesModal.show = false;
            },
            addPicture: function () {
                let self = this;
                this.filesManagerOpen({
                    title: "选择图集图片",
                    okText: "确定",
                    cancelText: "取消",
                    type: "image",
                    multi: true,
                    ok: images => {
                        images.map(image => {
                            self.data.pictures.push({
                                picture: image.url,
                                desc: '',
                                url: ''
                            });
                        });
                    }
                });
            },
            deletePicture(index) {
                this.data.pictures.splice(index, 1);
            },
            save() {
                if (this.data.name.toString().length < 1) {
                    return message.error("图集名称未填写");
                }
                if (this.data.pictures.length === 0) {
                    return message.error("至少使用一张图片");
                }
                if (this.loading) {
                    return;
                }
                let siteIdList =  [];
                this.sites.forEach(site => {
                    if (site.checked) {
                        siteIdList.push(site.id);
                    }
                });
                this.data.siteId = siteIdList.join(",");
                const hide = message.loading("正在保存数据...");
                axios.post("{url url='/cms/api/focus/save'}", this.data).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        window.location.href = "{url url='/cms/admin/focus/list'}";
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"图集管理" },
                { name:"编辑" }
            ]
        });
    }
</script>
{include "INC_footer.html"}